<script setup lang="ts">
import CommonDialog from "@/components/CommonDialog.vue";
import commonSearch from "@/components/commonSearch.vue";
import commonTable from "@/components/commonTable.vue";
import type { optionsType } from "@/types/CommonTable";
import { ref, toRaw } from "vue";

export type aboutType = {
    name: string;
    age: string;
    gender: number;
    genderValue: string;
    hobby: string;
    task: string;
    dreaming: string;
    food: string;
    date: string;
};
const tableData = ref<aboutType[]>([
    {
        name: "xhg1",
        age: "21",
        gender: 1,
        genderValue: "男",
        hobby: "sleep",
        task: "coding",
        dreaming: "sleeping",
        food: "烤肉",
        date: "2001-10-26",
    },
    {
        name: "xhg2",
        age: "21",
        gender: 1,
        genderValue: "男",
        hobby: "sleep",
        task: "coding",
        dreaming: "sleeping",
        food: "烤面包",
        date: "2001-10-26",
    },
    {
        name: "xhg3",
        age: "23",
        gender: 1,
        genderValue: "男",
        hobby: "read",
        task: "coding",
        dreaming: "sleeping",
        food: "吃蛋挞",
        date: "2001-10-26",
    },
]);

const options = ref<optionsType>({
    showIndex: true,
    indexWidth: 100,
    indexLabel: "序号",
    menu: true, //是否有操作栏 boolean
    menuWidth: 180, //操作栏宽度 number
    menuTitle: "操作2", //操作栏标题 string
    menuFixed: true, //操作栏是否为固定列 boolean
    menuType: "primary", //操作栏按钮类型 string
    column: [
        {
            prop: "name",
            label: "姓名",
            width: 180,
            formLabelWidth: 80,
        },
        {
            prop: "age",
            label: "年龄",
            width: 180,
            formLabelWidth: 80,
        },
        {
            prop: "genderValue",
            label: "性别",
            width: 180,
            formLabelWidth: 80,
        },
        {
            prop: "task",
            label: "任务",
            width: 180,
            formLabelWidth: 80,
        },
        {
            prop: "dreaming",
            label: "梦想",
            width: 180,
            formLabelWidth: 80,
        },
        {
            prop: "food",
            label: "美食",
            width: 180,
            formLabelWidth: 80,
        },
        {
            prop: "date",
            label: "时间",
            width: 120,
            formLabelWidth: 80,
        },
    ],
    dialogColumn: [
        // 弹窗要显示的数据
        {
            prop: "name",
            label: "姓名",
            width: 180,
            formLabelWidth: 80,
        },
        {
            prop: "age",
            label: "年龄",
            width: 180,
            formLabelWidth: 80,
        },
        {
            prop: "genderValue",
            label: "性别",
            width: 180,
            formLabelWidth: 80,
        },
        {
            prop: "task",
            label: "任务",
            width: 180,
            formLabelWidth: 80,
        },
        {
            prop: "dreaming",
            label: "梦想",
            width: 180,
            formLabelWidth: 80,
        },
        {
            prop: "food",
            label: "美食",
            width: 180,
            formLabelWidth: 80,
        },
    ],
    searchColumn: [
        {
            label: "姓名",
            prop: "name",
            searchWidth: 100,
            searchLabel: 50,
        },
        {
            label: "年龄",
            prop: "age",
            searchWidth: 100,
            searchLabel: 50,
        },
    ],
});

// 弹窗处理的逻辑
const { dialogColumn } = options.value;
const dialogColumnData = toRaw(dialogColumn);
const commonDialog = ref<InstanceType<typeof CommonDialog> | null>(null);
const handleEdit = (row: any, type: string) => {
    console.log(row, type);
    commonDialog.value?.openDialog(row, type);
};

// 搜索框的逻辑
const { searchColumn } = options.value;
const searchColumnData = toRaw(searchColumn);
const handleQuery = (search: any) => {};
</script>

<template>
    <div class="About">
        <div class="ab-top">
            <commonSearch
                :searchColumn="searchColumnData"
                @query="handleQuery"
            ></commonSearch>
            <commonTable
                @rowEdit="handleEdit"
                :tableData="tableData"
                :options="options"
            >
                <template #date="{ scope }">
                    <el-tag>{{ scope.row.date }}</el-tag>
                </template>
                <template #genderValueForm>
                    <el-select placeholder="请选择性别">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="2"></el-option>
                    </el-select>
                </template>
            </commonTable>
        </div>
        <CommonDialog ref="commonDialog" :column="dialogColumnData">
            <template #genderValueForm="{ form }">
                <el-select placeholder="请选择性别">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
            </template>
        </CommonDialog>
    </div>
</template>

<style lang="less" scoped>
.About {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.ab-top {
    width: 80%;
    border: 1px solid #dcdfe6;
}
</style>
